import { useLocation } from "react-router-dom";

function query(search: string) {
  // Record 表示一个对象类型
  //    第一个类型参数表示对象 key 的类型
  //    第二个类型参数表示对象 value 的类型
  const result: Record<string, string> = {};

  search = search.replace(/^\?/, "");

  const arr = search.split("&");
  arr.forEach((item) => {
    const tmp = item.split("=");
    result[tmp[0]] = tmp[1];
  });

  return result;
}

// export default function Home({ location }) {
//   // 1. 获取 search
//   const { search } = location;
//   // 2. 自行做处理字符串  ‘?a=1&b=2’  => {a: '1', b: '2'}
//   const result = query(search);
//   console.log("result", result);
//   return (
//     <div>
//       <h2>Home</h2>

//       <button>A: {result.a}</button>

//       <button>B: {result.b}</button>
//     </div>
//   );
// }

export default function Home() {
  const { search } = useLocation();
  const result = new URLSearchParams(search);

  return (
    <div>
      <h2>Home</h2>

      <button>A: {result.get("a")}</button>

      <button>B: {result.get("b")}</button>
    </div>
  );
}
